<template>
    <div>
        <div class="detail_container" v-loading="isLoading">
            <div class="detail_title">
                <h3>{{ noticeDetailInfo.noticeTitle || '-' }}</h3>
                <span class="tag_icon top_icon" v-if="noticeDetailInfo.isTopStatus == 1">置顶</span>
                <span class="tag_icon important_icon" v-if="noticeDetailInfo.isImportant >= 0">重要</span>
                <span class="tag_icon urgent_icon" v-if="noticeDetailInfo.isUrgent >= 0">紧急</span>
            </div>
            <p>发布类型：<span>{{ noticeDetailInfo.noticeTypeName || '-' }}</span></p>
            <p class="notice_creator">发布人：<el-tag type="warning">{{ noticeDetailInfo.noticeSenderName || '-' }}</el-tag></p>
            <p class="nitice_time">发布时间：<span>{{ formatDate.dateTimeAllFormat( noticeDetailInfo.publishDate || '') }}</span></p>
            <p class="notice_users">
                <div style="width: 72px;">通知对象：</div>
                <div style="width: 800px;">
                    <el-tag v-for="(uItem, uIndex)  in noticeDetailInfo.receiverNameList" :key="uIndex" class="margin-right-sm margin-bottom-sm">{{ uItem }}</el-tag>
                </div>
            </p>
            <div class="detail_content">
                <div class="read_info">
                    <div>
                        <span>已读12人</span>
                        <el-divider direction="vertical" />
                        <span>未读0人</span>
                    </div>
                </div>
                <div class="content">
                    <div v-html="richText" class="ql-editor"></div>
                </div>
            </div>
            <div v-if="noticeDetailInfo.fileList && noticeDetailInfo.fileList.length">
                <p class="margin-bottom-md">附件信息</p>
                <ul>
                    <li v-for="fItem in noticeDetailInfo.fileList" class="flex">
                        <i class="icon-base icon-base-appendix" 
                            style="font-size: 20px;margin-top: 2px;color: #27A3FF;margin-right: 10px;"></i>
                        <p style="width: 450px;color: #999;font-size: 14px;">{{ fItem.name }}</p>
                        <el-button link type="primary" @click="downLoadFile(fItem)">下 载</el-button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
  
<script setup>
    import { onMounted, ref } from "vue"
    import { noticeDetail } from "@/api/notice.js"
    import { formatDate } from "@/utils/fomart"
    const route = useRoute();
    const isLoading = ref(false);
    const noticeDetailInfo = ref({});
    const richText = ref('');
    const downLoadFile = (item) => {
        window.open(item.url);
    };
    const getEmailDetail = () => {
        isLoading.value = true;
        const noticeId = route.params.noticeId || ''
        noticeDetail({
            id: noticeId,
            managerType: 0,
        }).then(res => {
            isLoading.value = false;
            noticeDetailInfo.value = res.data || {};
            richText.value = noticeDetailInfo.value.noticeContent; // 提取通知内容
            // 以下均为格式转换的垃圾代码 看看接口返回就懂了这垃圾代码怎么来的了
            noticeDetailInfo.value.receiverNameList = noticeDetailInfo.value.receiverNames 
                ? noticeDetailInfo.value.receiverNames.split(',') : []; // 通知对象字符串转换
            noticeDetailInfo.value.noticeImportanceList = noticeDetailInfo.value.noticeImportanceName 
                ? noticeDetailInfo.value.noticeImportanceName .split(',') : []; // 重要程度字符串转换
            noticeDetailInfo.value.isImportant = noticeDetailInfo.value.noticeImportanceList.findIndex( item => item == '重要');
            noticeDetailInfo.value.isUrgent = noticeDetailInfo.value.noticeImportanceList.findIndex( item => item == '紧急');
            noticeDetailInfo.value.fileList = []; // 附件最离谱，两个数组拼接，而且拼接前还得将url字符串转一次
            noticeDetailInfo.value.attachUrls = noticeDetailInfo.value.attachUrls ? noticeDetailInfo.value.attachUrls.split(',') : [];
            if(noticeDetailInfo.value.attachUrlNames && noticeDetailInfo.value.attachUrlNames.length){
                noticeDetailInfo.value.attachUrlNames.map( (item, index) => {
                    const obj = { name: item, url: noticeDetailInfo.value.attachUrls[index] }
                    noticeDetailInfo.value.fileList.push(obj);
                });
            }
        });
    }
    onMounted( () => {
        getEmailDetail();
    });
</script>
<style scoped lang="scss">
    .detail_container{
        padding: 20px 0;
        .tag_icon{
            padding: 2px 4px;
            font-size: 12px;
            border-radius: 3px;
        }
        .top_icon{ background-color: #eee; }
        .important_icon{ background-color: #F5222D;color: #fff; }
        .urgent_icon{  background-color: #F59A23;color: #fff; }
        p{
            font-size: 14px;
            padding: 3px 0;
        }
        .detail_title{
            display: flex;
            margin-bottom: 5px;
            span{
                margin-left: 5px;
            }
        }
        .notice_creator{
            .el-tag{
                margin-left: 13px;
            }
        }
        .nitice_time{
            span{
                color: #999;
            }
        }
        .notice_users{
            display: flex;
            .el-tag{
                margin-right: 5px;
            }
        }
        .detail_content{
            .read_info{
                margin-top: 10px;
                font-size: 14px;
                display: flex;
                justify-content: flex-end;
                span:first-child{
                    color: #999;
                }
                span:last-child{
                    color: #1890FF;
                }
            }
            .content{
                margin: 5px 0 5px;
                border: 1px solid #eee;
                border-radius: 5px;
                min-height: 340px;
            }
        }
    }
</style>
  